<template>
  <div class="warp">
    <div class="header">
      <h4>我的订单</h4>
    </div>
    <div class="main">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="left-content">
          <div class="top">
            <h4 @click="ToShop(item.shopId)">{{ item.shopName }}</h4>
            <span
              @click="ToPay(item.orderId)"
              v-if="item.order_status == 0"
              class="pay"
              >待支付</span
            >
            <span v-if="item.order_status == 1" class="success">支付完成</span>
            <span v-if="item.order_status == 2" class="canel">已取消</span>
          </div>
          <div class="shop">
            <div class="shoppic">
              <img
                :src="item2.img"
                v-for="(item2, index2) in item.items"
                :key="index2"
              />
            </div>
            <div class="right">
              <p class="price">¥{{ item.totalPrice }}</p>
              <p class="number">共{{ item.items.length }}件</p>
            </div>
          </div>
        </div>
        <div class="right-content">
          <i class="iconfont icon-shanchu" @click="Delete(item.orderId)"></i>
        </div>
      </div>
    </div>
    <docker></docker>
  </div>
</template>
<script>
import Docker from "../../components/Docker.vue";

export default {
  name: "order",
  created() {
    this.list = this.$store.state.order.orderList;
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    ToPay(id) {
      this.$router.push({
        path: "/OrderSumbit",
        query: {
          orderId: id,
        },
      });
    },
    ToShop(id) {
      this.$router.push({
        path: "/Shop",
        query: {
          id: id,
        },
      });
    },
    Delete(orderId) {
        this.$store.commit("order/deleteOrder", {
          orderId: orderId,
        });
    },
  },
  components: { Docker },
};
</script>
<style lang="scss" scoped>
.continer {
  padding: 0 18px;
}
.warp {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .header {
    background-color: white;
    height: 44px;
    text-align: center;
    line-height: 44px;
    h4 {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
    }
  }
  .main {
    margin: 0 15px;
    .item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 16px 0px;
      background-color: white;
      padding: 10px;
      .left-content {
        flex: 1;
        .top {
          display: flex;
          justify-content: space-between;
          h4 {
            font-family: PingFangSC-Medium;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
          }
          .canel {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #999999;
            text-align: right;
          }
          .pay {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #1fa4fc;
            text-align: right;
          }
          .success {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #1fa4fc;
            text-align: right;
          }
        }
        .shop {
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          .shoppic {
            img {
              width: 40px;
              height: 40px;
              margin-right: 12px;
              border: none;
            }
          }
          .right {
            p {
              line-height: 20px;
            }
            .price {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #e93b3b;
              text-align: right;
            }
            .number {
              font-family: PingFangSC-Regular;
              font-size: 12px;
              color: #333333;
              text-align: right;
              line-height: 14px;
            }
          }
        }
      }
      .right-content {
        margin-left: 15px;
        display: flex;
        flex-direction: column;

        justify-content: center;
        i {
          font-size: 20px;
          color: #ccc;
          font-weight: bold;
        }
      }
    }
  }
}
</style>